<template>
  <div class="profile-container">
    <el-card>
      <!-- 1. 个人中心头 -->
      <template #header>
        <div>个人中心</div>
      </template>
      <!-- 2. 用户信息 展示 -->
      <div v-if="userInfo">
        <div class="avatar">
          <img :src="avatar" />
        </div>
        <div>用户名 {{ userInfo.username }}</div>
        <div>用户角色 {{ roleNames }}</div>
      </div>
    </el-card>
    <!-- 3. 添加、修改 的权限按钮 -->
    <el-button v-permission="['super_admin']">添加</el-button>
    <el-button v-permission="['user']">修改</el-button>
  </div>
</template>

<script lang="ts" setup>
// 4. 导入 useUserStore
import { useUserStore } from "@/stores/user"
// 5. 使用 useUserStore
const store = useUserStore()
// 6. 获取用户信息
const userInfo = computed(() => store.state.userInfo)
// 7. 获取头像
const avatar = computed(() => userInfo.value.avatar)
// 8. 获取用户所有的角色名
const roleNames = computed(() => store.state.roles.map((role) => role.name))
</script>

<style scoped>
.profile-container {
  @apply w-150 mx-auto;
}
</style>
